<template>
    <div id="level-point-echart" :style="{ width: '1000px', height: '600px' }"></div>
</template>

<script setup>
import { onMounted, ref , watch , reactive} from "vue";
import * as echarts from 'echarts'
import { weekStockSearch } from '../stores/week'
import { storeToRefs } from 'pinia';
import { getMonthData } from '../service/month';
import { useRoute } from 'vue-router'

const stockSearchStore = weekStockSearch()
let { input } = storeToRefs(stockSearchStore) 

// 网址传参
const {query: query} = useRoute()
if(query.stock) {
    input.value = query.stock
}

const state = reactive({
    lps : [],
    dates : []
})

// 只监听pinia中某一个值的变化
watch(() => input.value, (newValue, oldValue) => {
    loadEchart()
})

const option = ref(null)
option.value = {
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    dataZoom: [
    {
        xAxisIndex: [0],
        filterMode:'filter'
    }
    ],
    xAxis: {
        type: 'category',
        data: state.dates 
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: state.lps,
            type: 'line',
            smooth: true
        }
    ]
};

let myChart = null

const initEchart = () => {
    myChart = echarts.init(document.getElementById('level-point-echart'))
    myChart.resize();
}

const loadEchart = () => {
    getMonthData(input.value).then(res => {
        let lps = []
        let dates = []
        for (const item of res.data) {
            dates.push(item.date)
            lps.push(item.lp)
        }

        state.lps = lps
        state.dates = dates

        option.value.xAxis.data = dates
        option.value.series[0].data = lps

        myChart.setOption(option.value)
    })
}

onMounted(()=> {
    initEchart()

    loadEchart()
})
</script>